<template>
  <view class="page" v-if="shenheStatus != 1 || !shenheAliStatus">
    <div class="info-section">
      <div class="info-line">
		  <h2 class="min-margin-top">基本信息</h2>
		  <div>
		    <ul class="baseEss">
		  			<li class="baseEss-fir">姓名：{{ detail.name}}</li>
		  			<li class="phone-li">电话：{{ detail.phone }}</li>
      </ul>
		    <p>地址：{{ detail.address }}</p>
    </div>
	  </div>
    </div>
    <div class="info-section">
      <div class="info-line">
		  <h2 class="min-margin-top">服务信息</h2>
		  <ul id="serve">
        <li>服务时间：{{ detail.date }}</li>
        <li>服务项目：{{ detail.serve }}</li>
        <li>服务金额：{{ detail.price }}</li>
        <li>服务人员：{{ detail.serve_man }}</li>
      </ul>
    </div>
    </div>
    <div class="info-section">
      <div class="info-line">
      <h2>保险信息</h2>
      <!-- 在这里添加保险信息的显示内容 -->
	  <ul>
		    <li v-if="detail.insurance" class="report-content">
		  			<div class="red-icon">
						<image :src="asyncImgs.insurance.pdf" alt="" />
					</div>
		  			<div class="report-text">
		  				<p>保单信息.PDF</p>
		  				<p class="kb">{{detail.insurance_size}}</p>
		  			</div>
		  			<p><a href="#" @click="openFile(detail.insurance)">点击查看</a></p>
		  			<!-- <a href="#" @click="openFile(detail.insurance)">保单信息.pdf</a> -->
		  		</li>
		    <li v-else class="insurance-text">您暂未购买保险，请联系客服购买！</li>
	  </ul>
    </div>
    </div>
    <div class="info-section">
      <div class="info-line">
      <h2>检测报告</h2>
      <ul>
		  	<li v-if="detail.report" class="report-content">
		  		<div class="red-icon">
		  			<image :src="asyncImgs.insurance.pdf" alt="" />
				</div>
	  			<div class="report-text">
	  				<p>检测报告.PDF</p>
					<p class="kb">{{detail.report_size}}</p>
		  		</div>
		  		<p><a href="#" @click="openFile(detail.report)">点击查看</a></p>
		  	</li>
		  <li v-else>暂无检测报告</li>
		    <li class="baseLine">复检剩余次数：{{ detail.search_num }}</li>
      </ul>
    </div>
    </div>
    <div class="info-section">
      <h2>服务视频</h2>
      <ul class="serve-view">
		<li v-if="detail.live_room_url">
          <video
            :src="detail.live_room_url"
          ></video>
        </li>
		<li v-else class="insurance-text">暂无服务视频</li>
      </ul>
    </div>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { getInsurance } from "@/api/insurance";

export default {
  components: { Shenhe },
  data() {
    return {
      phone: "",
      detail: {
        name: "",
        phone: "",
        date: "",
        address: "",
        insurance: "",
        price: "",
        report: "",
        search_num: "",
        serve: "",
        serve_man: "",
		insurance_size:"",
		report_size:""
      },
    };
  },
  onLoad(t) {
    this.phone = t.phone;
    this.get_insurance();
  },
  methods: {
    async get_insurance() {
      let { phone } = this;
      const res = await getInsurance({ phone }, true);
      if (res.code == 0) {
        this.detail = res.data;
      }
    },
	openFile(url) {
		uni.showLoading({
        title: "加载中..."
      });
		uni.downloadFile({
		  url: url,
		  success: function (res) {
		    var filePath = res.tempFilePath;
		    uni.openDocument({
		      filePath: filePath,
		      showMenu: true,
			  complete:function () {
				  uni.hideLoading();
		      },
		    });
		  }
		});
	}
  },
};
</script>

<style>
.page {
  background-color: white;
  height: 100vh; /* 设置高度为视窗高度的 100% */
  width: 100%; /* 设置宽度为100% */
}
.info-section {
  padding-left: 19.5px;
  padding-right: 19.5px;
  font-size: 14px;
  margin-bottom: 15px;
}
.info-line{
	border-bottom: 0.5px solid #F2F2F2;
}
.info-section .baseEss{
	width: 100%;
	display: flex;
	/* justify-content: space-between; */
}
.baseEss>.phone-li{
  margin-left: 23%;
}
.info-section p{
	margin-bottom: 17.5px;
}
h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 28px;
  margin-top: 28px;
}
.min-margin-top{
	margin-top: 15px;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 15px;
  font-size: 14px;
}

.insurance-text{
	color: red;
	margin: 15px auto;
}
/* 检测报告 */
.report-content{
	display: flex;
}
.red-icon{
	width: 74px;
	height: 74px;
	background-color:#D81E06;
	border-radius: 5px;
}
.red-icon image{
	width: 38.7px;
	height: 38.7px;
	margin: 17.5px;
}
.report-content>p{
	width: 67.5px;
	height: 25px;
	border-radius: 15px;
	font-size: 12px;
	text-align: center;
	line-height: 25px;
	border: 0.5px solid #3BA4FF;
	color: #3BA4FF;
	margin-right: 14px;
	margin-top: 24.5px;
}
.report-text{
	margin-top: 14px;
	margin-left: 13.5px;
	flex: 1;
}
.report-text .kb{
	font-size: 12px;
	line-height: 18.5px;
	color: #999999;
	margin-top: 10px;
}
.baseLine{
	padding-top: 28px;
	border-top: 0.5px solid #F2F2F2;
}
/* 视频部分 */
.serve-view video{
	height: 161px;
	width: 100%;
	border-radius: 10px 35px 10px 35px;
}
</style>
